<template>
	<view class="make_add margin-lr margin-bottom" :class="[type=='PersonalCenter' ? '' : 'margin-top']">
		<view class="text-bold margin-bottom-sm">制作和添加新绘本</view>
		<view style="width: 100%;" class="make_add-flex  flex justify-between align-center text-orange">
			<view @click="showModal=true" class="  flex align-center justify-center">
				<view>
				    <image src="@/static/userInfo/people.png" mode="aspectFit"></image>
				</view>
				<text class="text-sm">加群领取绘本</text>
			</view>
			<view @click="showModal=true" class=" margin-lr  flex align-center justify-center">
				<view>
					 <image src="@/static/userInfo/update.png" mode="aspectFit"></image>
				</view>
				<text class="text-sm">制作绘本</text>
			</view>
			<view @click="navForumFn" class=" flex align-center justify-center">
				<view>
					 <image src="@/static/userInfo/add.png" mode="aspectFit"></image>
				</view>
				<text class="text-sm">绘本资源论坛</text>
			</view>
		</view>
		<ImageModal  @confirm="saveFn" label="加群领取绘本" :value="modal.wechatGroupQrCode" @cancel="showModal=false" :show="showModal"></ImageModal>
	</view>
</template>

<script>
	import * as userInfoApi from '@/api/UserInfo/index.js';
	
	import ImageModal from '@/plugin/image_modal.vue'
	
	export default {
		props: {
			type: String
		},
		components:{ImageModal},
		data() {
			return {
				showModal: false,
				modal: {}
			}
		},
		async created() {
			let res = await userInfoApi.setting();
			if (res.code == 0) {
				this.modal = res.data
			}
		},
		methods: {
			// 资源论坛
			navForumFn() {
				uni.navigateTo({
					url: '/pages/Forum/index'
				})
			}
		},
	}
</script>

<style lang="scss">
	.make_add {
		.make_add-flex {
			>view {
				height: 240upx;
				flex: 1;
				border: 4upx solid $theme-color;
				border-radius: 10upx;
				flex-direction: column;

				>view {
					image{
						width: 80upx;
						height: 80upx;
					}
				}

				// text {
				// 	transform: translateY(-30upx);
				// }
			}
		}
	}
</style>